<template>
  <div class="dashboard-container">
    <!-- 侧边菜单 -->
    <div class="sidebar">
      <div class="logo-section">
        <h2>物业保修系统</h2>
        <div class="user-info">
          <el-avatar :size="40" :src="userAvatar" />
          <div class="user-details">
            <p class="username">{{ userInfo.username || 'admin' }}</p>
            <p class="role">{{ userInfo.role || '管理员' }}</p>
          </div>
        </div>
      </div>
      
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        @select="handleMenuSelect"
        background-color="#2c3e50"
        text-color="#ecf0f1"
        active-text-color="#3498db"
      >
        <el-menu-item index="dashboard">
          <el-icon><House /></el-icon>
          <span>首页概览</span>
        </el-menu-item>
        
        <el-sub-menu index="user-management">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <!-- <el-menu-item index="pending-users">待审核用户</el-menu-item> -->
          <el-menu-item index="all-users">所有用户</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="facility">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>设施设备管理</span>
          </template>
          <el-menu-item index="facility-list">设备列表</el-menu-item>
          <el-menu-item index="facility-maintenance">维护记录</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="maintenance">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>保修管理</span>
          </template>
          <el-menu-item index="maintenance-requests">保修申请</el-menu-item>
          <el-menu-item index="maintenance-records">保修记录</el-menu-item>
        </el-sub-menu>
        
        <el-menu-item index="statistics">
          <el-icon><DataAnalysis /></el-icon>
          <span>数据统计</span>
        </el-menu-item>
        
        <el-menu-item index="profile">
          <el-icon><UserFilled /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
        
        <el-menu-item index="settings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
      </el-menu>
      
      <!-- 退出登录 -->
      <div class="logout-section">
        <el-button type="danger" plain @click="handleLogout">
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </el-button>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部工具栏 -->
      <div class="header">
        <div class="breadcrumb">
          <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-actions">
          <el-badge :value="12" class="notification-badge">
            <el-icon size="20"><Bell /></el-icon>
          </el-badge>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 根据activeMenu显示不同内容 -->
        <div v-if="activeMenu === 'dashboard'" class="dashboard-content">
          <h2>欢迎来到物业保修系统</h2>
          
          <!-- 统计卡片 -->
          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-icon user-icon">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.totalUsers }}</h3>
                <p>总用户数</p>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon pending-icon">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.pendingUsers }}</h3>
                <p>待审核用户</p>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon maintenance-icon">
                <el-icon><Tools /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.maintenanceRequests }}</h3>
                <p>保修申请</p>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon completed-icon">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.completedTasks }}</h3>
                <p>已完成任务</p>
              </div>
            </div>
          </div>
          
          <!-- 快速操作 -->
          <div class="quick-actions">
            <h3>快速操作</h3>
            <div class="action-buttons">
              <el-button type="primary" @click="goToMenu('pending-users')">
                <el-icon><User /></el-icon>
                审核用户
              </el-button>
              <el-button type="success" @click="goToMenu('maintenance-requests')">
                <el-icon><Tools /></el-icon>
                处理保修
              </el-button>
              <el-button type="info" @click="goToMenu('statistics')">
                <el-icon><DataAnalysis /></el-icon>
                查看统计
              </el-button>
            </div>
          </div>
        </div>
        
        <!-- 待审核用户页面 -->
        <!-- <div v-else-if="activeMenu === 'pending-users'" class="pending-users-content">
          <h2>待审核用户</h2>
          <p>这里将显示待审核的用户列表...</p>
        </div> -->
        
        <!-- 所有用户页面 -->
        <div v-else-if="activeMenu === 'all-users'" class="all-users-content">
          <UserManagement />
        </div>
        
        <!-- 设施设备管理页面 -->
        <div v-else-if="activeMenu === 'facility-list'" class="facility-list-content">
          <FacilityManagement />
        </div>
        
        <!-- 个人信息页面 -->
        <div v-else-if="activeMenu === 'profile'" class="profile-content">
          <div class="profile-header">
            <h2>个人信息</h2>
            <el-button type="primary" @click="toggleEditMode">
              <el-icon><Edit /></el-icon>
              {{ editMode ? '取消编辑' : '编辑信息' }}
            </el-button>
          </div>
          
          <div class="profile-main">
            <!-- 头像部分 -->
            <div class="avatar-section">
              <el-avatar :size="120" :src="profileInfo.avatar" />
              <div class="avatar-actions" v-if="editMode">
                <el-button type="primary" size="small">更换头像</el-button>
              </div>
            </div>
            
            <!-- 信息表单 -->
            <div class="info-section">
              <el-form :model="profileInfo" label-width="100px" class="profile-form">
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="用户名">
                      <el-input 
                        v-model="profileInfo.username" 
                        :disabled="!editMode"
                        placeholder="请输入用户名"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="真实姓名">
                      <el-input 
                        v-model="profileInfo.realName" 
                        :disabled="!editMode"
                        placeholder="请输入真实姓名"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="手机号">
                      <el-input 
                        v-model="profileInfo.phone" 
                        :disabled="!editMode"
                        placeholder="请输入手机号"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="身份证号">
                      <el-input 
                        v-model="profileInfo.idCard" 
                        :disabled="!editMode"
                        placeholder="请输入身份证号"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="房屋面积">
                      <el-input-number 
                        v-model="profileInfo.houseArea" 
                        :disabled="!editMode"
                        placeholder="请输入房屋面积"
                        style="width: 100%"
                        :precision="2"
                        :min="0"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="房屋类型">
                      <el-select 
                        v-model="profileInfo.houseType" 
                        :disabled="!editMode"
                        placeholder="请选择房屋类型"
                        style="width: 100%"
                      >
                        <el-option label="住宅" value="住宅" />
                        <el-option label="商铺" value="商铺" />
                        <el-option label="办公" value="办公" />
                        <el-option label="其他" value="其他" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-form-item label="房屋地址">
                  <el-input 
                    v-model="profileInfo.houseAddress" 
                    :disabled="!editMode"
                    placeholder="请输入房屋地址"
                    type="textarea"
                    :rows="2"
                  />
                </el-form-item>
                
                <el-form-item label="注册时间">
                  <el-input 
                    :value="formatDate(profileInfo.createTime)" 
                    disabled
                    placeholder="注册时间"
                  />
                </el-form-item>
                
                <el-form-item label="账户状态">
                  <el-tag :type="getStatusType(profileInfo.status)">
                    {{ getStatusText(profileInfo.status) }}
                  </el-tag>
                </el-form-item>
                
                <!-- 保存按钮 -->
                <el-form-item v-if="editMode">
                  <el-button type="primary" @click="saveProfile" :loading="loading">
                    <el-icon><Check /></el-icon>
                    保存修改
                  </el-button>
                  <el-button @click="cancelEdit" :disabled="loading">
                    <el-icon><Close /></el-icon>
                    取消
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          
          <!-- 密码修改 -->
          <div class="password-section" v-if="!editMode">
            <h3>密码修改</h3>
            <el-button type="warning" @click="showPasswordDialog = true">
              <el-icon><Lock /></el-icon>
              修改密码
            </el-button>
          </div>
        </div>
        
        <!-- 其他页面占位 -->
        <div v-else class="placeholder-content">
          <el-empty description="页面开发中..." />
        </div>
      </div>
    </div>
    
    <!-- 密码修改对话框 -->
    <el-dialog
      v-model="showPasswordDialog"
      title="修改密码"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="100px"
        class="password-form"
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            placeholder="请输入当前密码"
            show-password
            clearable
          />
        </el-form-item>
        
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
            show-password
            clearable
          />
        </el-form-item>
        
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
            clearable
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPasswordChange">取消</el-button>
          <el-button type="primary" @click="handlePasswordChange" :loading="passwordLoading">
            确认修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCurrentUser, updateUserProfile, changePassword } from '@/api/auth'
import UserManagement from '@/components/UserManagement.vue'
import FacilityManagement from '@/components/FacilityManagement.vue'

const router = useRouter()
const userStore = useUserStore()

// 当前活跃菜单
const activeMenu = ref('dashboard')

// 用户信息
const userInfo = reactive({
  username: 'admin',
  role: '管理员'
})

// 用户头像（默认头像）
const userAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

// 统计数据
const stats = reactive({
  totalUsers: 128,
  pendingUsers: 15,
  maintenanceRequests: 32,
  completedTasks: 89
})

// 编辑模式
const editMode = ref(false)

// 密码修改对话框
const showPasswordDialog = ref(false)

// 个人信息数据
const profileInfo = reactive({
  id: null,
  username: '',
  realName: '',
  phone: '',
  idCard: '',
  houseAddress: '',
  houseArea: null,
  houseType: '',
  status: 0,
  createTime: '',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

// 加载状态
const loading = ref(false)

// 密码修改相关
const passwordFormRef = ref()
const passwordLoading = ref(false)
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 备份原始数据（用于取消编辑）
let originalProfileInfo = null

// 当前页面标题
const currentPageTitle = computed(() => {
  const titleMap = {
    'dashboard': '首页概览',
    'pending-users': '待审核用户',
    'all-users': '所有用户',
    'facility-list': '设备列表',
    'facility-maintenance': '维护记录',
    'maintenance-requests': '保修申请',
    'maintenance-records': '保修记录',
    'statistics': '数据统计',
    'profile': '个人信息',
    'settings': '系统设置'
  }
  return titleMap[activeMenu.value] || '页面'
})

// 处理菜单选择
const handleMenuSelect = (key) => {
  activeMenu.value = key
}

// 快速跳转到菜单
const goToMenu = (menuKey) => {
  activeMenu.value = menuKey
}

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    userStore.logout()
    ElMessage.success('已退出登录')
    router.push('/login')
  } catch {
    // 用户取消退出
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN')
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning', // 待审核
    1: 'success', // 已通过
    2: 'danger'   // 已拒绝
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝'
  }
  return statusMap[status] || '未知状态'
}

// 保存个人信息
const saveProfile = async () => {
  try {
    loading.value = true
    
    // 构建更新数据
    const updateData = {
      realName: profileInfo.realName,
      phone: profileInfo.phone,
      idCard: profileInfo.idCard,
      houseAddress: profileInfo.houseAddress,
      houseArea: profileInfo.houseArea,
      houseType: profileInfo.houseType
    }
    
    await updateUserProfile(updateData)
    
    ElMessage.success('个人信息更新成功')
    editMode.value = false
    originalProfileInfo = null
    
    // 重新加载用户信息
    await loadUserProfile()
  } catch (error) {
    ElMessage.error('个人信息更新失败：' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

// 取消编辑
const cancelEdit = () => {
  if (originalProfileInfo) {
    // 恢复原始数据
    Object.assign(profileInfo, originalProfileInfo)
    originalProfileInfo = null
  }
  editMode.value = false
}

// 切换编辑模式
const toggleEditMode = () => {
  if (!editMode.value) {
    // 进入编辑模式时备份原始数据
    originalProfileInfo = { ...profileInfo }
    editMode.value = true
  } else {
    // 退出编辑模式，相当于取消编辑
    cancelEdit()
  }
}

// 加载用户信息
const loadUserProfile = async () => {
  try {
    loading.value = true
    const response = await getCurrentUser()
    
    // 更新profileInfo
    Object.assign(profileInfo, response.data)
    
    // 更新侧边栏用户信息
    userInfo.username = response.data.username
    userInfo.role = response.data.username === 'admin' ? '管理员' : '用户'
    
  } catch (error) {
    ElMessage.error('加载用户信息失败：' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

// 组件挂载时加载用户信息
onMounted(() => {
  console.log('🏠 =================================')
  console.log('🏠 Dashboard组件挂载')
  console.log('🏠 当前路由:', router.currentRoute.value.path)
  console.log('🏠 localStorage token:', localStorage.getItem('token'))
  console.log('🏠 userStore token:', userStore.token)
  console.log('🏠 userStore isLoggedIn:', userStore.isLoggedIn)
  console.log('🏠 开始加载用户信息...')
  console.log('🏠 =================================')
  
  loadUserProfile()
})

// 密码验证规则
const validateConfirmPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

// 取消密码修改
const cancelPasswordChange = () => {
  showPasswordDialog.value = false
  // 清空表单
  passwordForm.currentPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
  // 清空验证
  if (passwordFormRef.value) {
    passwordFormRef.value.clearValidate()
  }
}

// 处理密码修改
const handlePasswordChange = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      passwordLoading.value = true
      try {
        // 调用密码修改API
        await changePassword({
          currentPassword: passwordForm.currentPassword,
          newPassword: passwordForm.newPassword
        })
        
        ElMessage.success('密码修改成功，请重新登录')
        
        // 关闭对话框
        cancelPasswordChange()
        
        // 登出并跳转到登录页
        setTimeout(() => {
          userStore.logout()
          router.push('/login')
        }, 1500)
        
      } catch (error) {
        ElMessage.error('密码修改失败：' + (error.message || '未知错误'))
      } finally {
        passwordLoading.value = false
      }
    }
  })
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
}

/* 侧边栏样式 */
.sidebar {
  width: 250px;
  background-color: #2c3e50;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.logo-section {
  padding: 20px;
  border-bottom: 1px solid #34495e;
}

.logo-section h2 {
  color: #ecf0f1;
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-details {
  flex: 1;
}

.user-details .username {
  color: #ecf0f1;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.user-details .role {
  color: #bdc3c7;
  font-size: 12px;
  margin: 2px 0 0 0;
}

.sidebar-menu {
  flex: 1;
  border: none;
}

.sidebar-menu .el-menu-item {
  border-radius: 6px;
  margin: 2px 8px;
}

.sidebar-menu .el-sub-menu__title {
  border-radius: 6px;
  margin: 2px 8px;
}

.logout-section {
  padding: 20px;
  border-top: 1px solid #34495e;
}

.logout-section .el-button {
  width: 100%;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: calc(100vw - 250px);
  height: 100vh;
}

.header {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-badge {
  cursor: pointer;
}

.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  height: calc(100vh - 60px);
  width: 100%;
}

/* 首页内容样式 */
.dashboard-content h2 {
  color: #2c3e50;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.user-icon {
  background: linear-gradient(45deg, #3498db, #2980b9);
}

.pending-icon {
  background: linear-gradient(45deg, #f39c12, #e67e22);
}

.maintenance-icon {
  background: linear-gradient(45deg, #e74c3c, #c0392b);
}

.completed-icon {
  background: linear-gradient(45deg, #27ae60, #229954);
}

.stat-info h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: #2c3e50;
}

.stat-info p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 4px 0 0 0;
}

.quick-actions {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quick-actions h3 {
  color: #2c3e50;
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  flex: 1;
  min-width: 140px;
  height: 48px;
  font-size: 14px;
}

/* 其他页面内容 */
.pending-users-content,
.placeholder-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* .all-users-content - UserManagement组件有自己的样式，这里不需要额外的样式 */

/* .facility-list-content - FacilityManagement组件有自己的样式，这里不需要额外的样式 */

.placeholder-content {
  text-align: center;
  padding: 60px 24px;
}

/* 个人信息页面样式 */
.profile-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.profile-header h2 {
  margin: 0;
  color: white;
}

.profile-main {
  display: flex;
  gap: 32px;
  padding: 32px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 150px;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-section {
  flex: 1;
}

.profile-form {
  max-width: 800px;
}

.profile-form .el-form-item {
  margin-bottom: 20px;
}

.profile-form .el-input:disabled .el-input__inner,
.profile-form .el-input-number:disabled .el-input__inner,
.profile-form .el-select:disabled .el-input__inner,
.profile-form .el-textarea:disabled .el-textarea__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
}

.password-section {
  padding: 24px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafbfc;
}

.password-section h3 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

/* 密码修改对话框样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.el-dialog__header {
  padding: 20px 20px 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.el-dialog__title {
  color: white !important;
  font-weight: 600;
}

.el-dialog__body {
  padding: 30px 20px;
}

.password-form .el-form-item {
  margin-bottom: 24px;
}

.password-form .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .el-button {
    min-width: auto;
  }
}
</style>
